<template>
  <div class="currencystats">
  <div class="title">
     <p style="color:rgba(0,0,0,.87);font-weight: 500;">币热度排行榜</p>
     <p style="margin-top: 10px;font-size: 12px; line-height: 16px;color: rgba(0,0,0,.54);">MyToken &nbsp;数据支持,仅展示关注前200的币种</p>
  </div>
  <div class="search">
     <div class="search-text clearfix" >
        <span style="vertical-align: middle;"><i class="fa  fa-search fa-lg"></i></span> 
        <el-select
    v-model="value9"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="筛选"
    :remote-method="remoteMethod"
    :loading="loading"
    style="border:1px solid #fff;">
    <el-option
      v-for="item in options4"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </div>
        
  </div>
  </div>
</template>

<script>
import currencyStatsList from './exchangelistData';
export default {
  
  name: 'currencystats',
  data () {
    return {
     
       options4: [],
        value9: [],
        list: [],
        loading: false,
       states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
    }
  },
  created(){
    var arr=[];
    // this.list = currencyStatsList.map(function(value){
    //      return value.anchor;
    // })
    // console.log('this.list:',this.list);
  },
   mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item };
      });

    },
    methods: {
      remoteMethod() {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options4 = [];
        }
       }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.currencystats{
  height: 100%;
  width: 100%;
  .title{
      background: #fff;
      height: 78px;
       padding: 15px;
  }
}
</style>
